<template>
  <div style="display: flex; flex-direction: column;height: 100%;">
    <div style="margin-top: 30px;">
      <announcement style="margin-left: 30px;" @click="announcementStore.isDialogShow = true" />
    </div>
    <el-tooltip class="box-item" effect="dark" content="点击查看全部文章" placement="bottom">
      <span @click="toAllArticle()" class="title-span">推荐文章</span>
    </el-tooltip>
    <el-divider />
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>
    <!-- 文章卡片 -->
    <div v-else class="article-card">
      <div v-for="article in articleList" :key="article.id" class="card"
        :style="{ backgroundImage: `url(${config.downloadUrl}?name=${article.pic || defaultImage})` }">
        <div class="card__content" @click="toditials(article.id)">
          <p class="card__title">{{ article.title }}</p>
          <p class="card__description">文章作者: {{ article.authorName || '加载中...' }}</p>
          <p class="card__description">文章浏览量: {{ article.viewCount }}</p>
        </div>
      </div>
    </div>
    <span style="margin-top: 25px;" class="title-span">推荐作者</span>
    <el-divider />
    <!-- 推荐作者卡片 -->
    <div class="user-card">
      <div v-for="user in userList" :key="user.id" class="user-card-item">
        <img @click="toUserDetails(user.id)" :src="`${config.downloadUrl}?name=${user.avatar}`" alt="avatar" class="user-avatar" />
        <p class="user-name">{{ user.username }}</p>
        <p class="user-description">邮箱: {{ user.email }}</p>
        <p class="user-description">签名: {{ user.introduction || "暂无" }}</p>
      </div>
    </div>
  </div>
  <announcement-dialog v-if="announcementStore.isDialogShow" />
  <!-- <ditials v-if="foryouStore.isdrawerOpen" /> -->
   <user-details v-if="userStore.isUserDetailsOpen"/>
</template>

<script setup>
import { getByViewCountDESC } from '../../api/article';
import { reactive, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import config from '../../../public/config';
import announcement from '../../components/announcement.vue';
import announcementDialog from './components/announcementDialog.vue';
import { useAnnouncementStore } from '../../stores/announcement';
import { getuserMessage, getAllUser } from '../../api/user';
// import ditials from './components/ditials.vue';
import { useForYouStore } from '../../stores/foryou';
import router from '../../router';
import {useUserStore} from '../../stores/user'
import userDetails from '../../components/userDetails.vue';

const announcementStore =  useAnnouncementStore();
const foryouStore =  useForYouStore();
const userStore = useUserStore()


const articleList = reactive([]); // 文章列表
const userList = reactive([]); // 推荐作者列表
const loading = ref(true); // 加载状态
const defaultImage = '1c7774d3-d275-411f-aa4d-30e900f5826a.png'; // 默认图片

onMounted(() => {
  getArticle();
  getUser();
});

// 获取浏览量前10的文章
async function getArticle() {
  try {
    const res = await getByViewCountDESC();
    if (res.code === 200) {
      articleList.splice(0, articleList.length, ...res.data.list);
      await fetchAuthorNames();
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '获取数据失败: ' + error.message,
    });
  } finally {
    loading.value = false;
  }
}

// 获取文章的作者名称
const fetchAuthorNames = async () => {
  try {
    const authorPromises = articleList.map((article) => fetchAuthorName(article));
    await Promise.all(authorPromises);
  } catch (error) {
    console.error('获取作者名称失败:', error);
  }
};

// 获取单篇文章的作者名称
const fetchAuthorName = async (article) => {
  try {
    const params = new URLSearchParams();
    params.append("id", article.userId);
    const response = await getuserMessage(params);
    article.authorName = response.data.username;
  } catch (error) {
    article.authorName = '未知作者';
  }
};

// 获取所有用户（推荐作者）
async function getUser() {
  try {
    const res = await getAllUser();
    if (res.code === 200) {
      userList.splice(0, userList.length, ...res.data.list);
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

function toditials(id) {
  foryouStore.isdrawerOpen = true;
  foryouStore.articleId = id;
  router.push('/articleDetails')
}

function toAllArticle() {
  router.push('/allArticle');
}
function toUserDetails(id){
  router.push('/userDetails')
  userStore.userDetailsId = id
}
</script>

<style scoped>
.title-span {
  font-size: 20px;
  font-weight: 550;
  cursor: pointer;

}

.loading {
  text-align: center;
  font-size: 18px;
  color: #666;
  margin-top: 20px;
}

.article-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 10px;
}

.card {
  position: relative;
  width: calc(20% - 20px);
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.card:hover {
  transform: rotate(-5deg) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover .card__content {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

.card__title {
  margin: 0;
  font-size: 20px;
  color: #333;
  font-weight: 700;
}

.card__description {
  margin: 10px 0 0;
  font-size: 14px;
  color: #666;
}
/* 推荐作者卡片样式 */
.user-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片间距 */
  justify-content: space-between;
  
}

.user-card-item {
  width: calc(20% - 20px); /* 每行 5 个卡片，减去间距 */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #fff;
  transition: all 0.3s ease;
  padding: 15px;
  text-align: center;
  cursor: pointer;
}

.user-card-item:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.user-description {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .user-card-item {
    width: calc(25% - 20px); /* 每行 4 个卡片 */
  }
}

@media (max-width: 992px) {
  .user-card-item {
    width: calc(33.33% - 20px); /* 每行 3 个卡片 */
  }
}

@media (max-width: 768px) {
  .user-card-item {
    width: calc(50% - 20px); /* 每行 2 个卡片 */
  }
}

@media (max-width: 480px) {
  .user-card-item {
    width: 100%; /* 每行 1 个卡片 */
  }
}
</style>
